I have a component with four radio inputs in a group. One of them is written as such:
<div className="answer3 col-sm">
<label>
<input
type="radio"
id="answer1"
name="answer"
value="A"
checked={this.state.selectedOption === "A"}
onChange={this.onValueChange}
/>
<img src="./images/answer1.png" alt="answer A" />
</label>
</div>
The onChange method works to update the state, and I console log the input that is currently checked's value and it shows the value correctly. I have a style applied to radio buttons that are checked, basically changing the border, and it isn't being applied. The style (just to test) is as such:
input[type="radio"]:checked {
background-color: rgb(117, 17, 17);
}
Is this because the "checked" attribute is being added dynamically, bypassing CSS's ability to apply styles appropriately?
it is not because of dynamic 'checked' attribute. just try to apply the radio button input style using :after pseudo class. It will work.
From what I can see your React code seems to be okay... this is a CSS problem with radio button and its problem of accepting a background color change. What can be done with radio buttons is changing the accent-color from what I remember.
This is practically impossible and even if you were able to work something out, chances are it will work on some browsers and not on others.
But still, I think you can try something as simple as the one below.
div {
margin:10px;
}
.radio-btn:checked + label {
color: blue;
}<div>
<input type="radio" class="radio-btn" id="1" value="1" name="radbtn"/> <label for="1">Radio Option 1</label><br/>
<input type="radio" class="radio-btn" id="2" value="2" name="radbtn"/> <label for="2">Radio Option 2</label><br/>
<input type="radio" class="radio-btn" id="3" value="3" name="radbtn"/> <label for="3">Radio Option 3</label>
</div>Take a look and see if it can work for you.
Can you try using the computed style property and apply styles accordingly? For instance
<div className="answer3 col-sm">
<label>
<input
className={value ? 'some-checked-class' : ''}
type="radio"
id="answer1"
name="answer"
value={value}
checked={this.state.selectedOption === 'A'}
onChange={this.onValueChange}
/>
<img src="./images/answer1.png" alt="answer A" />
</label>
</div>